<#assign resources = "../resources/">
<#if modPath?contains("/")><#assign resources = "../../resources/"></#if> 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>单表增删改查</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!--ie渲染引擎-->
<meta name="format-detection" content="telephone=no" /> <!--忽略电话号码和email识别-->
<meta name="format-detection" content="email=no" />
<meta name="apple-mobile-web-app-capable" content="yes" /><!--当网站添加到主屏幕快速启动方式，将网站添加到主屏幕快速启动方式-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!--隐藏ios上的浏览器地址栏-->
<meta name="full-screen" content="yes"><!-- UC默认竖屏 ，UC强制全屏 -->
<meta name="browsermode" content="application">
<meta name="x5-orientation" content="portrait"><!-- QQ强制竖屏 QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<meta name="x5-page-mode" content="app">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<link rel="stylesheet" href="${resources}assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${resources}assets/css/beyond.min.css" />
<link rel="stylesheet" href="${resources}assets/css/demo.min.css"  />
<link rel="stylesheet" href="${resources}assets/css/font-awesome.min.css" />
<link rel="stylesheet" href="${resources}app/css/app.css">
</head>
<body>
<div id="app">
  <my_main>
   <router-view></router-view>
  </my_main>
</div><!-- div app -->

<!--列表模板 -->
<template id="listTemplate">
<div>

<div class="widget">
   <div class="widget-header bordered-bottom bordered-blue">
       <span class="widget-caption"><h4><i class="fa fa-search">查询</i></h4></span>
       <div class="widget-buttons buttons-bordered">
           <button class="btn btn-primary" style="margin-top: 2px" @click="queryAll" type="button">查询</button>
       </div>
   </div>
   <div class="widget-body">
      <form role="form" id="queryForm" class="form-horizontal" >
      <#assign row_cols =3> <#--定义每行多少个元素 -->
      <#list list as item>
      <#if  (item_index>0 &&  item_index%row_cols ==0)  >
	   </div><!--end row  ${item_index/row_cols -1}-->
      </#if>
	  <#if item_index%row_cols ==0 >
       <!--start row ${item_index/row_cols}-->
	   <div class="form-group form-group-sm ">		
	  </#if>
		  <label class="col-sm-1 control-label" for="${item.beanLable}"><#if item.comments?length  lte 10>${item.comments}<#else>${item.comments[0..10]}</#if></label>									  
	      <div class="col-sm-3  has-error">
		     <span class="input-icon icon-right">
                <#if item.javaType == "Date"><my_input_date <#else><input type="text" </#if> class="form-control" id="${item.beanLable}"  v-model="query.items.${item.beanLable}.value" <#if item.javaType == 'Date'> ></my_input_date><#else> placeholder="<#if item.comments?length  lte 10>${item.comments}<#else>${item.comments[0..10]}</#if>" /></#if>
                <i class="fa fa-times sky " style="padding-top:0" @click="query.items.${item.beanLable}.value=null"></i>
            </span>
	      </div>	  
	   <#if  !item_has_next >
		  <#if  item_index%row_cols ==0 >
		   <label for="tableName" class="col-sm-1 control-label">test字段</label>
		   <div class="col-sm-3 has-error">
				<span class="input-icon icon-right">
				  <my_input_date  class="form-control" value="2018-01-01"></my_input_date>
				</span>
			</div>       
		  </#if>
		</div><!--end row ${item_index/row_cols}-->
       </#if>
	  </#list> 
	 </form>
	</div>
</div>

<!-- 列表 -->
<div class="widget">
 <div class="widget-header "><span class="widget-caption">
 <h4 > <i class="fa fa-table">列表</i></h4></span>
    <div class="widget-buttons">
           <i class="toolbar-item fa fa-plus"   @click="add">添加</i>
           <i class="toolbar-item fa fa-minus"  @click="deleteByIds">删除</i>
           <i class="toolbar-item fa fa-pencil" @click="edit">修改</i>
    </div>
 </div>
 <div class="widget-body no-padding">
   <div class="widget-main ">
   <div class="table-responsive">
	    <table class="table table-hover"> <!-- table-condensed table-hover table-striped -->
		 <thead class="bordered-blue">
			     <tr>
			         <th style="width: 20px">
						<label >
			             <input ref="ckSelectAll" type="checkbox" class="colored-blue" @change="selectAll($event.target.checked)" style="display: none" >
			             <span class="text"></span>
			           </label>
			         </th>
                     <th>行号</th>					 
			         <#list list as item>
                         <th><#if item.comments?length lte 10>${item.comments}<#else>${item.comments[0..10]}</#if></th>
                     </#list>
			     </tr>
		 </thead>
		 <tbody>
		 <tr v-for="(obj,index) in list" @click="selectRow(obj,index)" >
		        <td>
		           <div class="checkbox" style="margin:0px">
                     <label style="padding-left:0px"> 
                       <input type="checkbox" class="colored-blue" v-model="obj.checked" style="display: none" ><span class="text" style="margin:0px"></span>
                     </label>
                   </div>
		         </td>
		         <td>{{(page.currentPage-1)*page.pageSize+index+1}}</td>
		         <!-- <td><router-link :to="{ name: 'view', params: { id: obj.id }}" >{{ obj.id }}</router-link></td> -->
		         <#list list as item>
                    <td >{{obj.${item.beanLable}}}</td>
                 </#list> 
		 </tr>
		 </tbody>
		</table>
       </div>
    </div>
  </div>
   <!-- 分页   v-bind="page" 传递参数, v-on:page_change 是当currentPage变化时的回调函数-->
   <div class="pull-right"><my_page v-bind="page" v-on:page_change="pageChangeCallback"></my_page></div>
   <br/>
</div>

</div>      
</template><!-- end 列表模板 -->
<!--添加模板 -->
<template id="addTemplate">
<div>

<div class="widget">
	<div class="widget-header">
		<span class="widget-caption"><h4 style="color: red">标红为必填项</h4></span>
		<i class="toolbar-item fa fa-reply-all " @click="$router.go(-1);">返回</i>
        <i class="toolbar-item fa fa-refresh "   @click="clear">重置</i>
        <i class="toolbar-item fa fa-check "     @click="save">保存</i>
  	</div>
  	<div class="widget-body bordered-top bordered-sky">
    <div class="collapse in">
		<form role="form" id="saveForm">
	  	<#list list as item>
     		<div class="form-group has-error">
         		<label class="control-label" for="${item.beanLable}"><#if item.comments?length lte 10>${item.comments}<#else>${item.comments[0..10]}</#if></label>
	         	<span class="input-icon icon-right">
			  		<#if item.javaType == "Date"><my_input_date <#else><input type="text" </#if>class="form-control" id="${item.beanLable}" v-model="vo.${item.beanLable}" <#if item.javaType == 'Date'> ></my_input_date><#else>placeholder="<#if item.comments?length  lte 10>${item.comments}<#else>${item.comments[0..10]}</#if>" /></#if>
	          		<i class="fa fa-times sky circular" @click="vo.${item.beanLable}=null"></i>
         		</span>
     		</div>
  		</#list>	 
      	</form>
	</div>
</div>
</div><!-- widget -->
</div>
</template>
<!-- end 添加模板  -->
<script src ="${resources}assets/js/jquery-2.0.3.min.js"></script>
<script src ="${resources}assets/js/bootstrap.min.js"></script>
<script src ="${resources}assets/js/bootbox/bootbox.js"></script>
<script src ="${resources}app/js/vue-online.js"></script>
<script src ="${resources}app/js/axios.min.js"></script>
<script src ="${resources}app/js/vue-axios.min.js"></script>
<script src ="${resources}app/js/vue-router.min.js"></script>
<script src ="${resources}app/js/vuex.min.js"></script>
<script src ="${resources}app/js/draggabilly.pkgd.min.js"></script>
<script src ="${resources}app/js/app-pc.js"></script>
<script src ="${resources}app/js/appConfig.js"></script>
<script src ="${resources}app/js/list.js"></script>
<script type="text/javascript">
//当前模块路径
var basePath="${modPath}${className?lower_case}/";
//自定义store
var myStore={/*自定义内容*/};
//1.自定义项目
//列表选项
var listOptions={
	data :{
		query:{
			items:{//查询项
				<#list list as item>
	    	    ${item.beanLable}:{name:'${item.comments}',value:null ,show:<#if item_index==0>true<#else>true</#if>},
			    </#list>	
          	}//items
	  	}//query
    }//data
};
//添加选项
var addOptions ={};
//编辑选项
var editOptions={}
//2. 创建模板实例
var myList =new DefautList(listOptions);
var myAdd  =new DefautAdd (addOptions);
var myEdit =new DefautEdit(editOptions);
//3. 注册组件
var listComponent=Vue.component('listComp',myList);
var addComponent =Vue.component('addComp' ,myAdd );
var editComponent=Vue.component('editComp',myEdit);
//4. 定义路由映射表,每个路径应该映射一个组件,可以选择性覆盖默认组件
var routerTable = [
	{name:'list', path: '/'     , component: listComponent }, 	//默认路由
    {name:'add' , path: '/add'  , component: addComponent },	//添加
    {name:'edit', path: '/edit' , component: editComponent  /*,props: true  */ }//编辑
];
//5. 创建 router 实例，然后传入routerTable 配置,创建全局store
var router = new VueRouter({routes:routerTable});
var store  = new VuexStore(myStore);
//6. 创建和挂载根实例.记得要通过 router 配置参数注入路由, 从而让整个应用都有路由功能,store也需要注入，让所有子组件共享全局数据
var app = new Vue({
	el : '#app',
    router, //全局路由
    store   //全局共享数据vuex
});
</script>
</body>
</html>